<template>
  <div class="infobox3">
    <div class="block1">商品</div>
    <div class="block2_main">
      <div class="block2">
        <div class="info1 flex aitems sb">
          <div class="tip1">基本信息</div>
        </div>
        <div class="info2 flex aitems">
          <div class="tip1">类型</div>
          <div class="tip2">
            <div class="input">
              <el-radio-group v-model="data.type">
                <el-radio :label="1">大图</el-radio>
                <el-radio :label="2">列表</el-radio>
                <el-radio :label="3">左右</el-radio>
                <el-radio :label="4">左右滑动</el-radio>
              </el-radio-group>
            </div>
          </div>
        </div>
        <div class="info2 flex aitems" v-if="data.type !== 4">
          <div class="tip1">触发底部加载</div>
          <div class="tip2">
            <div class="input">
              <el-radio-group v-model="data.ispage">
                <el-radio :label="0">自定义添加</el-radio>
                <el-radio :label="1">全部商品</el-radio>
              </el-radio-group>
            </div>
          </div>
        </div>
        <!-- <div class="info2 flex aitems">
          <div class="tip1">更多按钮</div>
          <div class="tip2">
            <div class="input">
              <el-radio-group v-model="data.more">
                <el-radio :label="1">显示</el-radio>
                <el-radio :label="0">隐藏</el-radio>
              </el-radio-group>
            </div>
          </div>
        </div> -->
        <div class="info2 flex aitems">
          <div class="tip1">标签显示</div>
          <div class="tip2">
            <div class="input">
              <el-radio-group v-model="data.label">
                <el-radio :label="1">显示</el-radio>
                <el-radio :label="0">隐藏</el-radio>
              </el-radio-group>
            </div>
          </div>
        </div>
        <!-- <div class="info2 flex aitems">
            <div class="tip1">阅读量</div>
            <div class="tip2">
              <div class="input">
                <el-radio-group v-model="data.ready">
                  <el-radio :label="1">显示</el-radio>
                  <el-radio :label="0">隐藏</el-radio>
                </el-radio-group>
              </div>
            </div>
          </div> -->
        <div class="info2 flex aitems">
          <div class="tip1">销量</div>
          <div class="tip2">
            <div class="input">
              <el-radio-group v-model="data.zan">
                <el-radio :label="1">显示</el-radio>
                <el-radio :label="0">隐藏</el-radio>
              </el-radio-group>
            </div>
          </div>
        </div>
        <div class="info2 flex aitems">
          <div class="tip1">商品样式</div>
          <div class="tip2">
            <div class="input">
              <el-radio-group v-model="data.carStyle">
                <el-radio :label="1">卡片</el-radio>
                <el-radio :label="2">描边</el-radio>
              </el-radio-group>
            </div>
          </div>
        </div>
        <div class="info2 flex aitems">
          <div class="tip1">边角</div>
          <div class="tip2">
            <div class="input">
              <el-slider
                v-model="data.radius"
                :max="100"
                :min="0"
                show-input
                input-size="mini"
              ></el-slider>
            </div>
          </div>
        </div>
        <div class="info2 flex aitems">
          <div class="tip1">图片边角</div>
          <div class="tip2">
            <div class="input">
              <el-slider
                v-model="data.imgRadius"
                :max="100"
                :min="0"
                show-input
                input-size="mini"
              ></el-slider>
            </div>
          </div>
        </div>
        <div class="info2 flex aitems">
          <div class="tip1">商品排序</div>
          <div class="tip2">
            <div class="input">
              <el-select v-model="data.sort" size="small">
                <el-option label="综合排序" :value="1"></el-option>
                <el-option label="销量从高到低" :value="2"></el-option>
                <el-option label="销量从低到高" :value="3"></el-option>
                <el-option label="价格从高到低" :value="4"></el-option>
                <el-option label="价格从低到高" :value="5"></el-option>
              </el-select>
            </div>
          </div>
        </div>
      </div>

      <div class="block2">
        <div class="info1 flex aitems sb">
          <div class="tip1">组件样式</div>
        </div>
        <div class="info2 flex aitems">
          <div class="tip1">上内边距</div>
          <div class="tip2">
            <div class="input">
              <el-slider
                v-model="data.style.pTop"
                :max="100"
                :min="0"
                show-input
                input-size="mini"
              ></el-slider>
            </div>
          </div>
        </div>
        <div class="info2 flex aitems">
          <div class="tip1">下内边距</div>
          <div class="tip2">
            <div class="input">
              <el-slider
                v-model="data.style.pBottom"
                :max="100"
                :min="0"
                show-input
                input-size="mini"
              ></el-slider>
            </div>
          </div>
        </div>
        <div class="info2 flex aitems">
          <div class="tip1">左内边距</div>
          <div class="tip2">
            <div class="input">
              <el-slider
                v-model="data.style.pLeft"
                :max="100"
                :min="0"
                show-input
                input-size="mini"
              ></el-slider>
            </div>
          </div>
        </div>
        <div class="info2 flex aitems">
          <div class="tip1">右内边距</div>
          <div class="tip2">
            <div class="input">
              <el-slider
                v-model="data.style.pRight"
                :max="100"
                :min="0"
                show-input
                input-size="mini"
              ></el-slider>
            </div>
          </div>
        </div>

        <div class="info2 flex aitems">
          <div class="tip1">上外边距</div>
          <div class="tip2">
            <div class="input">
              <el-slider
                v-model="data.style.mTop"
                :max="100"
                :min="0"
                show-input
                input-size="mini"
              ></el-slider>
            </div>
          </div>
        </div>
        <div class="info2 flex aitems">
          <div class="tip1">下外边距</div>
          <div class="tip2">
            <div class="input">
              <el-slider
                v-model="data.style.mBottom"
                :max="100"
                :min="0"
                show-input
                input-size="mini"
              ></el-slider>
            </div>
          </div>
        </div>
        <div class="info2 flex aitems">
          <div class="tip1">左外边距</div>
          <div class="tip2">
            <div class="input">
              <el-slider
                v-model="data.style.mLeft"
                :max="100"
                :min="0"
                show-input
                input-size="mini"
              ></el-slider>
            </div>
          </div>
        </div>
        <div class="info2 flex aitems">
          <div class="tip1">右外边距</div>
          <div class="tip2">
            <div class="input">
              <el-slider
                v-model="data.style.mRight"
                :max="100"
                :min="0"
                show-input
                input-size="mini"
              ></el-slider>
            </div>
          </div>
        </div>
      </div>

      <div class="block2" v-if="data.ispage == 0">
        <div class="info1 flex aitems sb">
          <div class="tip1">添加商品 (可拖动排序）</div>
        </div>
        <div class="info5">添加后可拖动排序。</div>
        <div class="info4">
          <draggable
            v-model="data.value"
            chosen-class="chosen"
            force-fallback="true"
            group="people"
            animation="500"
          >
            <transition-group>
              <div
                class="list"
                v-for="(item, index, key) in data.value"
                :key="index"
              >
                <div class="topbox1 flex aitems sb">
                  <div class="left flex aitems">
                    <i class="el-icon-s-grid" style="font-size: 20px"></i>
                    <div class="tip1">{{ item.name }}</div>
                  </div>
                  <div class="right" @click="imgDel(index)">删除</div>
                </div>
                <div class="centerbox1 flex aitems sb">
                  <div class="left">
                    <!-- <div class="flex aitems">
                        <div class="tip1">名称</div>
                        <div>
                          <el-input
                            size="mini"
                            v-model="item.name"
                            :maxlength="5"
                          >
                            <template slot="append"
                              >{{ item.name.length }}/{{ 5 }}</template
                            >
                          </el-input>
                        </div>
                      </div> -->
                    <!-- <div class="flex aitems link" @click="settingNav(index)">
                        <div class="tip1">链接</div>
                        <div class="tip2" v-if="item.urlType == 1">
                          请选择跳转链接 <i class="el-icon-arrow-right"></i>
                        </div>
                        <div class="tip2" v-if="item.urlType == 2">
                          导向小程序 <i class="el-icon-arrow-right"></i>
                        </div>
                        <div class="tip2" v-if="item.urlType == 3">
                          导向内容详情 <i class="el-icon-arrow-right"></i>
                        </div>
                        <div class="tip2" v-if="item.urlType == 4">
                          导向内部页面 <i class="el-icon-arrow-right"></i>
                        </div>
                        <div class="tip2" v-if="item.urlType == 5">
                          导向外部页面 <i class="el-icon-arrow-right"></i>
                        </div>
                      </div> -->
                  </div>
                  <div class="right">
                    <!-- <input
                        type="file"
                        :ref="'uploadfile' + index"
                        @change="uploadImg(index)"
                        id="fileclass2"
                        class="fileclass"
                        accept="image/gif,image/jpeg,image/png,image/jpg,image/bmp"
                      /> -->
                    <div class="img">
                      <img :src="item.img" alt="" />
                    </div>
                    <!-- <div class="size">{{ item.size }}</div> -->
                    <!-- <div class="btn">替换</div> -->
                  </div>
                </div>
              </div>
            </transition-group>
          </draggable>
        </div>
        <div class="info3">
          <!-- <input
                type="file"
                ref="uploadfile"
                @change="uploadImg('add')"
                id="fileclass"
                class="fileclass"
                accept="image/gif,image/jpeg,image/png,image/jpg,image/bmp"
              /> -->
          <el-button
            type=""
            size="small"
            icon="el-icon-plus"
            style="width: 100%"
            @click="handleAdd"
            >添加商品</el-button
          >
        </div>
      </div>
    </div>

    <linkCom
      v-if="navShow"
      :navForm="navForm"
      @navSubmit="navSubmit"
      @beforeClose="navShow = false"
    />
  </div>
</template>

<script>
import draggable from "vuedraggable";
import { uploads } from "@/api/upload";
import linkCom from "../../components/link.vue";
export default {
  components: { linkCom },
  props: ["data", "messageInfo"],
  data() {
    return {
      navIndex: null,
      navShow: false,
      navForm: {},
    };
  },
  watch: {
    messageInfo(sendData) {
      console.log("-----------------------------------");
      console.log(sendData);
      if (sendData.type == "product" && sendData.menuStr == "goods") {
        let goods = [...this.data.value];
        let goodsIds = [];
        this.data.value.map((item) => {
          goodsIds.push(item.id);
        });
        sendData.sendData.list.map((item) => {
          if (!goodsIds.includes(item.id)) {
            goods.push({
              img: item.img,
              tagList: item.tagList,
              goodsPrice: item.goodsPrice,
              salesVolumeVirtual: item.salesVolumeVirtual,
              salesVolume: item.salesVolume,
              name: item.name,
              id: item.id,
            });
          }
        });
        this.data.value = goods;
      }
    },
  },
  methods: {
    editorval(val) {
      this.navForm.content = val;
    },
    handleAdd() {
      this.$store.state.menuStr = "goods";
      window.parent.postMessage(
        {
          type: "product",
          options: {
            type: "checkbox",
          },
        },
        "*"
      );
      // this.data.value.push({
      //   name: `商品${this.data.value.length + 1}`,
      //   link: `https://image-c.weimobwmc.com/saas-wxbiz/8afe640edf4c48269f2c17b06dad435d.jpg?imageView2/2/w/750/q/100/interlace/1`,
      // });
    },
    uploadImg(type) {
      if (type == "add") {
        let obj = {
          link: "", //图片链接
          urlType: 1, //1无跳转 2小程序 3内容详情 4功能页面 5外部页面
          size: "", //尺寸
          w: "",
          h: "",
          miniappid: "", //2小程序APPID
          minipath: "", //2小程序路径
          content: "", //3内容详情
          path: "", //4内部页面路径
          params: "", //4携带参数
          goodsid: "", //4商品ID
          cateid: "", //4商品分类
          url: "", //5外部页面
        };
        let img = this.$refs.uploadfile.files[0];
        let form = new FormData();
        form.append("file", img, img.name);
        let reader = new FileReader();
        reader.readAsDataURL(img);
        reader.onload = function (e) {
          let img = new Image();
          img.src = e.target.result; //获取编码后的值,也可以用this.result获取
          img.onload = function () {
            console.log("height:" + this.height + "----width:" + this.width);
            obj.size = `${this.width}*${this.height}`;
            obj.w = `${this.width}`;
            obj.h = `${this.height}`;
          };
        };
        uploads(form).then((res) => {
          let link = res.data.data.link;
          obj.link = link;
          this.data.value.push(obj);
          document.getElementById("fileclass").value = null;
        });
      } else {
        let that = this;
        console.log(this.$refs["uploadfile" + type]);
        let img = this.$refs["uploadfile" + type][0].files[0];
        let form = new FormData();
        form.append("file", img, img.name);
        let reader = new FileReader();
        reader.readAsDataURL(img);
        reader.onload = function (e) {
          let img = new Image();
          img.src = e.target.result; //获取编码后的值,也可以用this.result获取
          img.onload = function () {
            console.log("height:" + this.height + "----width:" + this.width);
            that.data.value[type].size = `${this.width}*${this.height}`;
            that.data.value[type].w = `${this.width}`;
            that.data.value[type].h = `${this.height}`;
          };
        };
        uploads(form).then((res) => {
          let link = res.data.data.link;
          this.data.value[type].link = link;
          document.getElementById("fileclass2").value = null;
        });
      }
    },
    imgDel(index) {
      this.data.value.splice(index, 1);
    },
    settingNav(index) {
      this.navIndex = index;
      this.navShow = true;
      this.navForm = {
        urlType: this.data.value[index].urlType,
        miniappid: this.data.value[index].miniappid,
        minipath: this.data.value[index].minipath,
        content: this.data.value[index].content,
        path: this.data.value[index].path,
        params: this.data.value[index].params,
        goodsid: this.data.value[index].goodsid,
        cateid: this.data.value[index].cateid,
        url: this.data.value[index].url,
      };
    },
    navSubmit(form) {
      this.data.value[this.navIndex].urlType = form.urlType;
      if (form.urlType == 2) {
        this.data.value[this.navIndex].miniappid = form.miniappid;
        this.data.value[this.navIndex].minipath = form.minipath;
      }
      if (form.urlType == 3) {
        this.data.value[this.navIndex].content = form.content;
      }
      if (form.urlType == 4) {
        this.data.value[this.navIndex].path = form.path;
        this.data.value[this.navIndex].goodsid = form.goodsid;
        this.data.value[this.navIndex].cateid = form.cateid;
        this.data.value[this.navIndex].params = form.params;
      }
      if (form.urlType == 5) {
        this.data.value[this.navIndex].url = form.url;
      }
      console.log(this.data.value[this.navIndex]);
      this.navShow = false;
      this.navIndex = null;
      this.navForm = {};
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  .infobox3 {
    width: 340px;
    min-width: 340px;
    height: 100%;
    background: #f8f9fa;
    overflow-y: hidden;
    padding: 0 0px 10px;
    .block1 {
      font-size: 14px;
      font-weight: 600;
      color: #595961;
      padding: 9px 16px 9px 12px;
    }
    .block2_main {
      padding: 0 0 10px 0;
      height: calc(100% - 30px);
      overflow-y: scroll;
      .block2 {
        padding: 0 0 0 10px;
        .info1 {
          padding: 9px 16px 9px 12px;
          font-weight: 600;
          background: #eef0f4;
          border-radius: 5px;
          font-size: 12px;
          font-weight: 600;
          color: #595961;
          .tip1 {
          }
        }
        .info2 {
          padding: 10px;
          .tip1 {
            font-size: 12px;
            color: #595961;
            margin: 0 10px 0 0;
            width: 80px;
          }
          .tip2 {
            width: calc(100% - 80px - 10px);
            .uploadbox {
              cursor: pointer;
              width: 120px;
              height: 120px;
              background: #fff;
              transition: all 0.3s;
              border-radius: 4px;
              position: relative;
              overflow: hidden;
              .plusicon {
              }
              .uploadimg {
                width: 100%;
                height: 100%;
                img {
                  width: 100%;
                  height: 100%;
                  object-fit: contain;
                }
              }
            }
            .uploadbox:hover {
              box-shadow: 0 0 10px 0 #ccc;
            }
          }
          .input {
          }
        }
        .info3 {
          padding: 10px 0;
          position: relative;
        }
        .info4 {
          .list {
            padding: 15px 10px 20px;
            border-radius: 4px;
            margin-top: 10px;
            // min-height: 100px;
            background: #f0f2f5;
            .topbox1 {
              cursor: pointer;
              .left {
                color: #595961;
                font-weight: 600;
                font-size: 14px;
                i {
                }
                .tip1 {
                  margin-left: 5px;
                  position: relative;
                  top: -1px;
                }
              }
              .right {
                color: #9797a1;
                font-size: 12px;
              }
              .right:hover {
                color: #595961;
              }
            }
            .centerbox1 {
              margin-top: 10px;
              .left {
                width: calc(100% - 80px);
                cursor: pointer;
                .tip1 {
                  color: #595961;
                  font-size: 12px;
                  min-width: 50px;
                }
                .tip2 {
                  margin-left: 10px;
                  word-wrap: break-word;
                  font-size: 12px;
                  letter-spacing: 0;
                  color: #2589ff !important;
                }
                .link {
                  margin-top: 10px;
                }
              }
              .right {
                cursor: pointer;
                position: relative;
                .img {
                  img {
                    width: 70px;
                    height: 70px;
                    -o-object-fit: cover;
                    object-fit: cover;
                    border-radius: 4px;
                  }
                }
                .size {
                  position: absolute;
                  bottom: 0;
                  left: 0;
                  background: rgba(0, 0, 0, 0.6);
                  z-index: 1;
                  width: 100%;
                  height: 26px;
                  text-align: center;
                  font-family: PingFangSC-Semibold;
                  font-size: 12px;
                  color: #fff;
                  line-height: 26px;
                  letter-spacing: 0;
                  border-bottom-left-radius: 4px;
                  border-bottom-right-radius: 4px;
                }
                .btn {
                  width: 60px;
                  height: 30px;
                  font-size: 12px;
                  text-align: center;
                  position: absolute;
                  top: 0;
                  right: 0;
                  left: 0;
                  bottom: 0;
                  margin: auto;
                  display: none;
                  z-index: 2;
                  background: #fff;
                  border-radius: 4px;
                  font-weight: 600;
                  color: #595961;
                  line-height: 30px;
                }
              }
              .right:hover .btn {
                display: block;
              }
            }
          }
        }

        .info5 {
          color: #9797a1;
          font-size: 14px;
          padding: 10px;
        }
      }
    }
  }
}
.fileclass {
  position: absolute;
  width: 100%;
  bottom: 0;
  top: 0;
  z-index: 99;
  left: 0;
  right: 0;
  opacity: 0;
  cursor: pointer;
}
</style>
